<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../css/font.css">
    <link rel="stylesheet" href="../../css/xadmin.css">
    <link rel="stylesheet" href="../../lib/layui/css/layui.css">
    <script src="../../lib/layui/layui.js" charset="utf-8"></script>
    <script src="../../js/jquery.min.js"></script>
    <script type="text/javascript" src="../../js/xadmin.js"></script>
</head>
<body>
<style type="text/css">
    .showTime{text-align:center;}
</style>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <div class="x-nav">
          <span class="layui-breadcrumb">
            <a href="">首页</a>

            <a>
              <cite>日结/ daily</cite></a>
          </span>
                        <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
                           onclick="location.reload()" title="刷新">
                            <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
                    </div>
                    </br>
                </div>
                <div class="showTime"></div>
                <br>
                <p style="text-align:center;color:black;font-size:15px;" color="red">结算时间为  9:00-18:00</p>
                <form class="layui-form layui-col-space5" autocomplete="off">

                    <label class="layui-form-label">日期选择</label>
                    <div class="layui-input-inline">
                        <input type="text" name="time" class="layui-input" id="test1" placeholder=" 选择日结时间 ">
                    </div>&nbsp;
                    <div class="layui-inline layui-show-xs-block">
                        <button class="layui-btn" lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i>
                        </button>
                    </div>
                    <table class="layui-hide" id="demo" lay-filter="test"></table>
                </form>
            </div>
        </div>
    </div>
</div>
</div>
</div>
<!--换成自己的表格-->


</body>
</html>
<script type="text/html" id="toolbarDemo">
    <div class="layui-row">
        <div class="layui-col-md2 layui-col-sm3 layui-col-xs6" style="text-align: left;padding-left: 10px;">
            <div class="layui-input-inline yutons-btn-margin-right">
                <span class="layui-btn yutons layui-btn-sm yutons-color-detail" lay-event="table_export">导出</span>
            </div>
        </div>

    </div>
</script>

<script>
    layui.config({
        base: '../../js/layui_exts/'
    }).use(['table', 'excel','form','laydate','jquery'], function() {
        var laydate = layui.laydate;
        var form = layui.form;
        var table = layui.table;
        var $ = layui.jquery,
            excel = layui.excel;

        //日期范围
        laydate.render({
            elem: '#test1'
        });

        //执行一个 table 实例
        table.render({
            elem: '#demo',  //连接自己的表格
            url: '/JT90/getdailylist', //数据请求接口
            totalRow: true,
            toolbar: '#toolbarDemo', //操作1:启用自定义模板表格头部工具栏
            defaultToolbar: [], //操作2:隐藏头部工具栏右侧的图标
            cols: [
                [ //表头
                    {
                        type: 'checkbox',
                        fixed: 'left'
                    },{
                    field:'p_id',
                    title: '患者ID',
                    width:330,
                    fixed: 'left',
                    unresize: true,
                    totalRowText: '合计'
                },{
                    field:'p_name',
                    title:'患者姓名',
                    width:500
                },{
                    field:'pre_money',
                    title:'患者开方价格(元)',
                    width:540,
                    totalRow: true
                }
                ]
            ]
        });


        //监听提交
        form.on('submit(sreach)', function (data) {
            table.reload('demo', {
                url: '/JT90/beforedailylist',
                where: {
                    r_time: data.field.time
                }
            })
            return false;
        });


        //监听头工具栏事件
        table.on('toolbar(test)', function(obj) {
            var checkStatus = table.checkStatus(obj.config.id),
                data = checkStatus.data; //获取选中的数据
            switch (obj.event) {
                case 'table_export':
                    exportFile('demo')
                    break;
            };
        });

        /**
         * by yutons
         * Array.from() 非常方便的将一个类数组的集合 ==》 数组，直接使用数组身上的方法。例如：常用的map，foreach…
         * 但是，问题来了，IE不识别Array.from这个方法。所以写了它兼容IE的写法。
         */
        if (!Array.from) {
            Array.from = function(el) {
                return Array.apply(this, el);
            }
        }
        //表格导出
        function exportFile(id) {
            //根据传入tableID获取表头
            var headers = $("div[lay-id=" + id + "] .layui-table-box table").get(0);
            var htrs = Array.from(headers.querySelectorAll('tr'));
            var titles = {};
            for (var j = 0; j < htrs.length; j++) {
                var hths = Array.from(htrs[j].querySelectorAll("th"));
                for (var i = 0; i < hths.length; i++) {
                    var clazz = hths[i].getAttributeNode('class').value;
                    if (clazz != ' layui-table-col-special' && clazz != 'layui-hide') {
                        //排除居左、具有、隐藏字段
                        //修改:默认字段data-field+i,兼容部分数据表格中不存在data-field值的问题
                        titles['data-field' + i] = hths[i].innerText;
                    }
                }
            }
            //根据传入tableID获取table内容
            var bodys = $("div[lay-id=" + id + "] .layui-table-box table").get(1);
            var btrs = Array.from(bodys.querySelectorAll("tr"))
            var bodysArr = new Array();
            for (var j = 0; j < btrs.length; j++) {
                var contents = {};
                var btds = Array.from(btrs[j].querySelectorAll("td"));
                for (var i = 0; i < btds.length; i++) {
                    for (var key in titles) {
                        //修改:默认字段data-field+i,兼容部分数据表格中不存在data-field值的问题
                        var field = 'data-field' + i;
                        if (field === key) {
                            //根据表头字段获取table内容字段
                            contents[field] = btds[i].innerText;
                        }
                    }
                }
                bodysArr.push(contents)
            }
            //将标题行置顶添加到数组
            bodysArr.unshift(titles);
            //导出excel
            excel.exportExcel({
                sheet1: bodysArr
            }, '日结表' + new Date().toLocaleString() + '.xlsx', 'xlsx');
        }
    });
</script>
<script>
    var t = null;
    t = setTimeout(time, 1000); //檫始运行
    function time() {
        clearTimeout(t); //清除定时器
        dt = new Date();
        var y = dt.getFullYear();
        var mt = dt.getMonth() + 1;
        var day = dt.getDate();
        var h = dt.getHours(); //获取时
        var m = dt.getMinutes(); //获取分
        var s = dt.getSeconds(); //获取秒
        document.querySelector(".showTime").innerHTML = '当前时间：' + y + "年" + mt + "月" + day + "-" + h + "时" + m + "分" + s + "秒";
        t = setTimeout(time, 1000); //设定定时器，循环运行
    }
</script>

</body>
</html>
